<template>
  <view
    class="grid-item"
    :style="{
      height: height,
    }"
    ref="grid-item"
    :id="elId"
  >
    <slot></slot>
  </view>
</template>

<script>
  // #ifdef APP-NVUE
  const dom = uni.requireNativePlugin("dom");
  // #endif
  export default {
    name: "item",
    data() {
      const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`;
      return {
        elId,
        height: "auto",
      };
    },
    mounted() {
      console.log("mounted");
      this.$nextTick(() => {
        this.init();
      });
      uni.onWindowResize(this.init);
    },
    methods: {
      init() {
        // #ifndef APP-NVUE
        uni
          .createSelectorQuery()
          .in(this)
          .select(`#${this.elId}`)
          .boundingClientRect()
          .exec((ret) => {
            const el = ret[0];
            if (el) {
              this.height = el.width + "px";
            }
          });
        // #endif

        // #ifdef APP-NVUE
        dom.getComponentRect(this.$refs["grid-item"], (ret) => {
          if (ret.size) {
            this.height = ret.size.width + "px";
          }
        });
        // #endif
      },
    },
  };
</script>

<style lang="scss" scoped></style>

